<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户界面</title>
</head>
<body>

<input type="button" id="add" value="添加" onclick="add()"/>
<form action="" method="" hidden>
    <input type="text" name="_method" value="PUT" hidden/>
    <input type="text" name="_method" value="delete" hidden/>
</form>

<table border="1" align="center" style="width: 600px;text-align: center" id="list">
</table>
<div id="pageNav" align="center">
</div>



<form action="" method="" id="add_list" style="text-align: center" hidden>
    用户名: <input type="text" name="userName" id="userName"/><br/>
    密  码: <input type="password" name="password" id="password"/><br/>
    真实姓名: <input type="text" name="realName" id="realName"/><br/>
    性  别:<input type="radio" name="gender" id="man" value="1" />男
          <input type="radio" name="gender" id="women" value="2" />女<br/>
    出生日期:<input type="date" name="birthday" id="birthday"><br/>
    <input type="button" value="保存" id="save"/>
</form>


<form action="" method="" id="update_list" style="text-align: center" hidden>
    用户名: <input type="text" name="userName" id="userName1"/><br/>
    密  码: <input type="password" name="password" id="password1"/><br/>
    真实姓名: <input type="text" name="realName" id="realName1"/><br/>
    性  别:<input type="radio" name="gender1" id="man1" value="1" />男
    <input type="radio" name="gender1" id="women1" value="2" />女<br/>
    出生日期:<input type="date" name="birthday" id="birthday1"><br/>
    <input type="button" value="修改" id="update"/>
</form>

</body>
<!--加载js文件-->
<script src="js/jquery-1.8.3.min.js"></script>

<script>
    //页面加载完毕后自动触发事件
    $(function () {
        //调用分页方法
        pageQuery(1,8);
    })


    //创建分页方法
    function pageQuery(page,pagesize) {
        $.ajax({
            url:"/user",
            data:{"page":page,"pagesize":pagesize},
            type:"GET",
            dataType:"json",
            success:function (data) {
                if (data.flag == true){
                    let content="<tr style=\"width: 200px\"><th>UUID</th> <th>用户名</th> <th hidden>密码</th> <th>真实姓名</th> <th>性别</th> <th>出生日期</th> <th width='100px'>操作</th></tr>";
                    for (let i = 0; i <data.data.list.length ; i++) {
                        content += "<tr><td>"+data.data.list[i].uuid+"</td> <td>"+data.data.list[i].userName+"</td> <td hidden>"+data.data.list[i].password+"</td> <td>"+data.data.list[i].realName+"</td> <td>"+(data.data.list[i].gender=1?"男":"女")+"</td> <td>"+ data.data.list[i].birthday+"</td> <td><a href='JavaScript:void(0);' onclick='drop("+data.data.list[i].uuid+")'>删除</a>  <a href='JavaScript:void(0);' onclick='update("+data.data.list[i].uuid+")'>修改</a></td></tr>";
                    }
                    $("#list").html(content);

                    let nav='<a href="javascript:void(0)" onclick="pageQuery(1,'+pagesize+')">首页</a>';
                    nav+='<a href="javascript:void(0)" onclick="pageQuery('+data.data.prePage+','+pagesize+')">上一页</a>';

                    for(let i=1; i<=data.data.pages; i++){
                        nav+=' <a href="javascript:void(0)" onclick="pageQuery('+i+','+pagesize+')">'+i+'</a>';
                    }

                    nav+='<a href="javascript:void(0)" onclick="pageQuery('+data.data.nextPage+','+pagesize+')">下一页</a>';
                    nav+='<a href="javascript:void(0)" onclick="pageQuery('+data.data.pages+','+pagesize+')">末页</a>';

                    $("#pageNav").html(nav);
                }else{
                    alert(data.message);
                }
            }
        })
    }

    //点击添加按钮
    function add() {
        $("#add_list").show();
        reset();
        $("#save").click(function () {
            let userName = $("#userName").val();
            let password = $("#password").val();
            let realName = $("#realName").val();
            let gender = $('input:radio:checked').val();
            let birthday = $("#birthday").val();
            $.ajax({
                url:"/user",
                data:'{"userName":"'+userName+'","password":"'+password+'","realName":"'+realName+'","gender":"'+gender+'","birthday":"'+birthday+'"}',
                type:"POST",
                dataType:"json",
                contentType:"application/json",
                success:function (data) {
                    if (data.flag == true){
                        $("#add_list").hide();
                        pageQuery(1,8);
                    }else{
                        alert(data.message);
                    }
                }
            })
        })
    }

    //清空数据
    function reset() {
        $("#userName").val("");
        $("#password").val("");
        $("#realName").val("");
        $('input[type=radio][name="gender"]:checked').prop("checked", false);
        $("#birthday").val("");
    }


    //删除方法
    function drop(uuid) {
        $.ajax({
            url:"/user/"+uuid,
            type:"delete",
            dataType:"json",
            success:function (data) {
                if (data.flag == true){
                    pageQuery(1,8);
                }else{
                    alert(data.message);
                }
            }
        })
    }


    //修改方法
    function update(uuid) {
        //将表单进行显示
        $("#update_list").show();
        //根据UUID查询数据进行数据的回显
        findByUUID(uuid);
        //修改按钮点击事件
        $("#update").click(function () {
            let userName = $("#userName1").val();
            let password = $("#password1").val();
            let realName = $("#realName1").val();
            let gender = $('input:radio:checked').val();
            let birthday = $("#birthday1").val();
            $.ajax({
                url:"/user",
                data:'{"uuid":"'+uuid+'" ,"userName":"'+userName+'","password":"'+password+'","realName":"'+realName+'","gender":"'+gender+'","birthday":"'+birthday+'"}',
                type:"PUT",
                dataType:"json",
                contentType:"application/json",
                success:function (data) {
                    if (data.flag == true){
                        $("#update_list").hide();
                        pageQuery(1,8);
                    }else{
                        alert(data.message);
                    }
                }
            })
        })
    }


    //根据UUID进行查询
    function findByUUID(uuid) {
        $.ajax({
            url:"/user/"+uuid,
            type:"get",
            dataType:"json",
            success:function (data) {
                if (data.flag == true){
                    $("#userName1").val(data.data.userName);
                    $("#password1").val(data.data.password);
                    $("#realName1").val(data.data.realName);
                    $("input[name='gender1']").get(0).checked=true;
                    $("#birthday1").val(data.data.birthday);
                }else{
                    alert(data.message);
                }
            }
        })
    }
</script>

</html>